import React, { Component } from 'react'
import style from './homeDrawer.module.scss';
import { screenUrl } from '@/api'
import { connect } from 'react-redux'


class HomeDrawer extends Component {
    constructor(props) {
        super(props)
        this.state = {
            screenConditionData: {},//筛选条件数据
            isBlock: false,//筛选框是否显示
            screenNum: 1,
            sortType: null,//筛选条件
            sortTxt: '',//筛选条件对应的文本
            MultiConditionScreening: {
                service: [],//商家服务 (可多选)
                activity: [],//优惠活动 (单选)
                Price: []//人均消费
            }//多条件筛选对象
        }
    }
    componentDidMount() {
        this.getscreenUrlDataFn()
    }
    //获取筛选数据
    getscreenUrlDataFn = () => {
        let param = {
            latitude: this.props.currentLocation.latitude,
            longitude: this.props.currentLocation.longitude,
            terminal: 'h5'
        }
        screenUrl(param).then((res) => {
            // console.log(res, 'res');
            this.setState({
                screenConditionData: res
            })
        })
    }
    render() {
        return (<>
            <div>
                <ul className={style.screenSelect}>
                    <li onClick={(e) => { this.setScreenNum(1) }}>{this.state.sortTxt || '综合排序'}</li>
                    {this.state.screenConditionData?.outside?.outside_sort_filter.map((item) => {
                        return (<li key={item.value} className={item.value === this.state?.sortType ? style.screenContentItemTeTwo : ''} onClick={() => { this.setScreenNum(item.value, 1) }}>距离最近</li>)
                    })}
                    <li onClick={(e) => { this.setScreenNum(4) }}>筛选</li>
                </ul>
                {this.isScreenFn()}
            </div>
        </>);
    }
    isScreenFn = () => {
        if (this.state.isBlock) {
            return (
                <div className={style.screenContent}>
                    <div className={style.search}>
                        <p className={style.searchcontent}><i className='iconfont icon-fangdajing fangdajingIcon'></i>搜索饿了么商家、商品名称</p>
                    </div>
                    <ul className={style.screenSelect}>
                        <li onClick={(e) => { this.setScreenNum(1) }}>{this.state.sortTxt || '综合排序'}</li>
                        {this.state.screenConditionData?.outside?.outside_sort_filter.map((item) => {
                            return (<li key={item.value} className={item.value === this.state?.sortType ? style.screenContentItemTeTwo : ''} onClick={() => { this.setScreenNum(item.value, 1) }}>距离最近</li>)
                        })}
                        <li onClick={(e) => { this.setScreenNum(4) }}>筛选</li>
                    </ul>
                    <ul className={style.screenContentUl}>
                        {this.screenContentFn()}
                    </ul>
                    <div className={style.screenContentIsBlock} onClick={() => { this.setState({ isBlock: false }) }}></div>
                </div>
            )
        }
    }
    // 根据筛选条件title显示不同内容
    screenContentFn = () => {
        let num = this.state.screenNum;
        if (num === 1) {
            return this.state.screenConditionData?.outside?.inside_sort_filter.map((item) => {
                return (<li key={item.value} onClick={(e) => { this.screenItemFn(item.value, e) }} className={item.value === this.state?.sortType ? style.screenContentItemTe : style.screenContentItem}>
                    {item.name}
                    <i className={'iconfont icon-dui ' + style.dui}></i>
                </li>)
            })
        } else if (num === 4) {
            return this.multipleConditions();
        }
    }
    //点击筛选条件title
    setScreenNum = (value, num) => {
        if (num) {//中间点击的特殊处理
            this.setState({
                sortType: value,
                isBlock: false,
                sortTxt: '综合排序'
            })
        } else {
            this.setState({
                screenNum: value,
                isBlock: true
            })
        }
    }
    //筛选条件内部条件细节点击事件
    screenItemFn = (num, e) => {
        this.setState({
            sortType: num,
            isBlock: false,
            sortTxt: e.target.innerText
        })
    }
    //多条件筛选Dom
    multipleConditions = () => {
        // console.log('this.state.screenConditionData?.supports?.length', this.state);
        let Dom = '';
        if (this.state.screenConditionData?.bar?.supports?.length > 0) {
            Dom = (
                <>
                    <p className={style.screenItemTitle}>商家服务 (可多选)</p>
                    <div className={style.screenItemBox}>
                        {
                            this.state.screenConditionData?.bar?.supports.map((item) => {
                                return (<p onClick={() => { this.MultiConditionScreeningClick(item.id, 1) }} className={this.MultiConditionScreeningIsTrue(item.id, 1) ? style.screenItemValTe : style.screenItemVal} key={item.id}>{item.name}</p>)
                            })
                        }
                    </div>
                </>
            )
        }
        let DomTwo = '';
        if (this.state.screenConditionData?.bar?.activity_types?.length > 0) {
            DomTwo = (
                <>
                    <p className={style.screenItemTitle}>优惠活动 (单选)</p>
                    <div className={style.screenItemBox}>
                        {
                            this.state.screenConditionData?.bar?.activity_types.map((item) => {
                                return (<p onClick={() => { this.MultiConditionScreeningClick(item.id, 2) }} className={this.MultiConditionScreeningIsTrue(item.id, 2) ? style.screenItemValTe : style.screenItemVal} key={item.id}>{item.name}</p>)
                            })
                        }
                    </div>
                </>
            )
        }
        let DomThree = '';
        if (this.state.screenConditionData?.bar?.average_costs?.length > 0) {
            DomThree = (
                <>
                    <p className={style.screenItemTitle}>人均消费</p>
                    <div className={style.screenItemBox}>
                        {
                            this.state.screenConditionData?.bar?.average_costs.map((item) => {
                                return (<p onClick={() => { this.MultiConditionScreeningClick(item.id, 3) }} className={this.MultiConditionScreeningIsTrue(item.id, 3) ? style.screenItemValTe : style.screenItemVal} key={item.id}>{item.description}</p>)
                            })
                        }
                    </div>
                </>
            )
        }
        let Domfour = (<div>
            <div className={style.screenNo}>清空</div>
            <div className={style.screenYes}>确定</div>
        </div>)
        return (<>
            {Dom}{DomTwo}{DomThree}{Domfour}
        </>);
    }
    //多条件筛选
    MultiConditionScreeningClick = (id, num) => {
        if (num === 1) {
            let flag = true;
            let serviceArr = this.state.MultiConditionScreening.service;
            this.state.MultiConditionScreening.service.forEach((item, index) => {
                if (item === id) {
                    flag = false;
                    serviceArr.splice(index, 1)
                }
            })
            if (flag) {
                serviceArr.push(id)
            }
            this.setState({
                MultiConditionScreening: Object.assign(this.state.MultiConditionScreening, {
                    service: serviceArr
                })
            })
        } else if (num === 2) {
            let flag = true;
            let activityArr = this.state.MultiConditionScreening.activity;
            this.state.MultiConditionScreening.activity.forEach((item, index) => {
                if (item === id) {
                    flag = false;
                    activityArr.splice(index, 1)
                }
            })
            if (flag) {
                activityArr = [id]
            }
            this.setState({
                MultiConditionScreening: Object.assign(this.state.MultiConditionScreening, {
                    activity: activityArr
                })
            })
        } else if (num === 3) {
            let flag = true;
            let PriceArr = this.state.MultiConditionScreening.Price;
            this.state.MultiConditionScreening.Price.forEach((item, index) => {
                if (item === id) {
                    flag = false;
                    PriceArr.splice(index, 1)
                }
            })
            if (flag) {
                PriceArr = [id]
            }
            this.setState({
                MultiConditionScreening: Object.assign(this.state.MultiConditionScreening, {
                    Price: PriceArr
                })
            })
        }
    }
    //多条件筛选是否被选择
    MultiConditionScreeningIsTrue = (id, num) => {
        let flag = false;
        if (num === 1) {
            this.state.MultiConditionScreening.service.forEach((item, index) => {
                if (item === id) {
                    flag = true;
                }
            })
        } else if (num === 2) {
            this.state.MultiConditionScreening.activity.forEach((item, index) => {
                if (item === id) {
                    flag = true;
                }
            })
        } else if (num === 3) {
            this.state.MultiConditionScreening.Price.forEach((item, index) => {
                if (item === id) {
                    flag = true;
                }
            })
        }
        return flag;
    }
}


const stateToProps = (state) => {
    // console.log(state);
    return {
        currentLocation: state.region.currentLocation,
        LocationSelected: state.shipping.LocationSelected,
    }
}

const dispatchToProps = (dispatch) => {
}


export default connect(stateToProps, dispatchToProps)(HomeDrawer)
